<template>
	<view class="my-store-info">
	
		<view class="nav-plate">
			<view class="nav-plate-left">
				<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'active':cur==index}"
					@click="tabNav(index,item.value)">{{item.text}}</view>
			</view>
			<view class="nav-plate-right" @click="openSearch">设备筛选<u-icon name="search"></u-icon></view>
		</view>
		<view class="list">
			<view class="li-item" v-for="(item,index) in equipList" :key="index">
				
				<view class="li-item-model">
					<view class="item-child name">{{item.deviceName}}</view>
				</view>
				<view class="li-item-model">
					<view class="item-child label">设备编号：</view>
					<view class="item-child">{{item.deviceNumber}}</view>
				</view>
			
			
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-popup :show="showSearch" @close="close" @open="open" mode="center" :round="10">
		            <view class="passBox">
						<view class="search-input">
							<u--input
							    placeholder="请输入设备关键字"
							    border="surround"
							    v-model="deviceNumber"
							   
							  ></u--input>
						</view>
					<view class="btn" @click="searchList">确定</view>
		            </view>
				</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	const pic1 = require(`@/img/my/my1.png`);



	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				indexList: [],
				navList: [{
					text: "转入",
					value:1
				}, {
					text: "转出",
					value:2
				}],
				cur: 0,
				searchModel: {
					pageNo: 1,
					pageSize: 10,
					tradeType:1,
					descUserName:"",
					endTime:"",
					srcUserName:"",
					startTime:""
				},
				equipList: [],
				status: "loadmore",
				pageTotal: 1,
				descUserName: "",
			    deviceNumber:"",
				showSearch:false,
				count:0

			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {

			this.getEquipList();
		},
		onPullDownRefresh() {

			this.cur = 0;
			this.searchModel.tradeType = 1;
			this.equipList = [];
			this.searchModel.pageNo = 1;
			this.count=0;
			this.getEquipList();
			this.searchList();
		},
		onReachBottom() {
			if (this.count>=10) {
				this.status = 'loading';
				this.searchModel.pageNo++
				this.getEquipList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {

			tabNav(index,val) {
				this.cur = index;
				this.searchModel.tradeType = val;
				
				this.equipList = [];
				this.searchModel.pageNo = 1;
				this.count=0;
				this.getEquipList()
			},
			getEquipList() {
				let that = this;
				httpPost("/api/iotmerchantsdevice/tradeDeviceLogStatics", this.searchModel)
					.then((res) => {
						console.log(res)
						uni.stopPullDownRefresh();
						if (res.code == 0) {
							this.equipList = [...res.data.list, ...this.equipList];
							this.count=res.data.list.length;
					        if(this.count>=10){
						        this.status = 'loading';
					           }else{
						       this.status = 'nomore';
					          }
						}
					})
					.catch((e) => {});
			},
			openSearch(){
				this.showSearch=true;
			},
			close(){
				this.showSearch=false;
			},
			open(){
				this.showSearch=true;
			},
			searchList(){
				let that = this;
				if(!that.deviceNumber){
					uni.showToast({
						icon: "none",
						title: "请输入设备关键字"
					});
					return;
				}
				httpGet("/api/iotmerchantsdevice/tradeDeviceLogOne"+that.deviceNumber)
					.then((res) => {
						that.showSearch=false;
						console.log(res)
						uni.stopPullDownRefresh();
						that.equipList=res.data;
					})
					.catch((e) => {});
			}
			
		


		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f5f6f6;
		height: 100vh;
	}


	/deep/ .u-cell__title-text {
		font-size: 28rpx;
	}

	.head-plate {
		background: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.head-plate-into {
			margin-left: 30rpx;
			margin-right: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.option-btn-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.btn-p {
					padding: 10rpx 20rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 10rpx;
				}

				.btn-p:nth-child(1) {
					background-color: #fe6906;
				}

				.btn-p:nth-child(2) {
					background-color: #2adae9;
				}

				.btn-p:nth-child(3) {
					background-color: #20ae48;
				}
			}
		}

		.my-equip {
			.my-text {
				font-size: 32rpx;
				text-align: center;
			}

			.my-number {
				font-size: 70rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: 10rpx;
				margin-bottom: 10rpx;

				.tag {
					font-size: 32rpx;
					padding-top: 36rpx;
				}
			}
		}

		.equip-number {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 28rpx;
			border-top: 2rpx solid #eee;
			margin-top: 20rpx;
			padding-top: 20rpx;

			.equip-number-item {
				margin-right: 40rpx;
			}
		}
	}

	.nav-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.nav-plate-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.nav-item {
				padding-bottom: 6rpx;
				border-bottom: 4rpx solid #fff;
				margin-right: 20rpx;
			}

			.active {
				border-bottom: 4rpx solid #329ffc;
				color: #329ffc;
			}
		}

		.nav-plate-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

		}
	}

	.list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.li-item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
			background-color: #fff;
			border-radius: 10rpx;

			.Active {
				text-align: right;
				line-height: 60rpx;
			}

			.li-item-model {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 60rpx;
				}

				.label {
					color: #ababab;
				}

				.no-activation {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}

				.item-child {
					width: 50%;

					.btn-active {
						width: 90rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 10rpx;
						background-color: #52bff8;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}

			.li-item-model:nth-child(2) {
				margin-top: 20rpx;

				.item-child:nth-child(2) {
					text-align: right;
				}
			}
		}
	}
	.footer{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 690rpx;
		position: fixed;
		bottom: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		.f-left{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.word{
				margin-left: 20rpx;
				line-height: 60rpx;
			}
			.word:nth-child(2){
				font-weight: bold;
			}
		}
		.f-right{
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #4cbcfb;
			color: #fff;
			border-radius: 10rpx;
		}
	}
	.passBox{
		width: 500rpx;
		.btn{
			height: 70rpx;
			line-height: 70rpx;
			background-color: #4cbcfb;
			color: #fff;
			text-align: center;
			width: 100%;
			border-radius: 10rpx;
			margin-top: 40rpx;
		}
	padding: 50rpx;
		
	}
</style>